<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="../../favicon.ico">

  <title>Dashboard Template for Bootstrap</title>

  <!-- Bootstrap core CSS -->
  <link href="./css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="./css/dashboard.css" rel="stylesheet">
</head>

<body>

  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
          aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">CMDB资产管理系统</a>
      </div>
    </div>
  </nav>

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-3 col-md-2 sidebar">
        <ul class="nav nav-sidebar">
          <li class="active"><a href="#">主机列表 <span class="sr-only">(current)</span></a></li>
          <li><a href="#">用户列表</a></li>
          <li><a href="#">权限列表</a></li>
          <li><a href="#">日志列表</a></li>
        </ul>
      </div>
      <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h1 class="page-header">控制台</h1>
        <h2 class="sub-header">主机管理</h2>
        <button class="btn btn-info" data-toggle="modal" data-target="#addhost">添加主机</button>
        <div id="addhost" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                    aria-hidden="true">×</span></button>
                <h4 class="modal-title">添加主机</h4>
              </div>
                   <div class="modal-body">
                <!-- 此处是在模态框中显示的内容 -->
              </div>
                   <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="mybtn">保存</button>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div>
        <div class="table-responsive">
          <table class="table table-striped">
            <thead>
              <tr>
                <th>id</th>
                <th>IP</th>
                <th>hostname</th>
                <th>type</th>
                <th>status</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <!-- <tr>
                <td>1</td>
                <td>192.168.19.100</td>
                <td>server01</td>
                <td>web</td>
                <td>online</td>
                <td>
                  <button class="btn btn-primary btn-sm">更新</button>
                  <button class="btn btn-danger btn-sm">删除</button>
                </td>
              </tr>
              <tr>
                <td>2</td>
                <td>192.168.19.101</td>
                <td>server02</td>
                <td>mysql</td>
                <td>online</td>
                <td>
                  <button class="btn btn-primary btn-sm">更新</button>
                  <button class="btn btn-danger btn-sm">删除</button>
                </td>
              </tr>
              <tr class="danger">
                <td>3</td>
                <td>192.168.19.102</td>
                <td>server03</td>
                <td>web</td>
                <td>down</td>
                <td>
                  <button class="btn btn-primary btn-sm">更新</button>
                  <button class="btn btn-danger btn-sm">删除</button>
                </td>
              </tr> -->
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <!-- Bootstrap core JavaScript
    ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <script src="./js/jquery.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <script src="./layer/layer.js"></script>
  <script>
    $.ajax({
      // 请求方法 方式 get post
      type: 'get',
      // 请求url地址
      url: 'http://127.0.0.1/hosts',
      // 客户端向服务端传输的数据
      data: '',
      // 数据类型
      dataType: 'json',
      // 当服务端响应时 会调用此方法
      // response 服务端返回的信息
      success: function (response) {
        // console.log(response)
        // 调用方法  拼接数据  添加到页面中
        $('tbody').append(tpl(response))
        // 当页面渲染完成，才可以通过js查找元素 绑定事件
        // 前端页面假删除
        // 1、删除按钮绑定事件
        $('.btn-danger').click(function () {
          // this 当前对象  js对象
          // console.log(this)
          // $(this) this是js对象 $(this)转为jq对象
          // console.log($(this).parent().parent().html())
          // 2、确认删除按钮对应的所在行
          // 3、删除当前所在行
          // 删除对应行
          // 让用户判断是否真的删除
          // bom对象中 浏览器对象有一个确认框
          // if (confirm('确认删除吗?')) {
          //   $(this).parent().parent().remove()
          // }
          // 存一下当前点击按钮对象
          var current_btn = $(this)
          layer.confirm('是否真的删除数据', {
            btn: ['删除', '取消'] //按钮
          }, function () {
            layer.msg('删除成功', { icon: 1 });
            current_btn.parent().parent().remove()
          }, function () {
            layer.msg('取消删除', {
              time: 2000, //20s后自动关闭
            });
          });
        })
      }
    })
    // 拼接html模板
    function tpl(data) {
      // console.log(data)
      var str = ''
      for (var i = 0; i < data.length; i++) {
        str += '<tr>';
        str += '<td>' + data[i].id + '</td>';
        str += '<td>' + data[i].ip + '</td>';
        str += '<td>' + data[i].hostname + '</td>';
        str += '<td>' + data[i].type + '</td>';
        str += '<td>' + data[i].status + '</td>';
        str += '<td><button class="btn btn-primary btn-sm">更新</button><button class="btn btn-danger btn-sm">删除</button></td>'
        // console.log(data[i])
      }
      // console.log(str)
      return str
    }
  </script>
</body>

</html>